<template>
  <div class="article">
    <el-card class="searchBar" shadow="never">
      <div class="searchBar-title">查询条件</div>
      <el-form
        ref="form"
        :inline="true"
        :model="searchForm"
        class="demo-form-inline"
        size="small"
      >
        <el-form-item label="作者">
          <el-input v-model="searchForm.author" placeholder="作者" />
        </el-form-item>
        <el-form-item label="标题">
          <el-input v-model="searchForm.title" placeholder="标题" />
        </el-form-item>
        <el-form-item label="编辑类型">
          <el-select v-model="searchForm.editorType" placeholder="编辑类型">
            <el-option label="富文本" value="0" />
            <el-option label="markdown" value="1" />
          </el-select>
        </el-form-item>
        <div class="searchBar-btn">
          <el-form-item>
            <el-button size="mini" type="primary" @click="onSearch"
              >查询</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="onReset">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-card class="formTable">
      <div class="addBtn">
        <el-button size="mini" type="primary" @click="addArticle"
          >新增</el-button
        >
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column label="#" fixed type="index" align="center" />
          <el-table-column label="文章标题" prop="title" align="center" />
          <el-table-column label="展示图片" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.coverImg"
              />
            </template>
          </el-table-column>
          <el-table-column label="添加时间" prop="createTime" align="center" />
          <el-table-column label="文章作者" prop="author" align="center" />
          <el-table-column label="文章是否显示" align="center">
            <template slot-scope="scope">
              <div>
                <el-switch
                  v-model="scope.row.isShow"
                  :active-value="1"
                  :inactive-value="0"
                  @change="swtichCode(scope.row)"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="编辑类型" align="center">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" plain type="primary">{{
                  scope.row.editorType === 0 ? '富文本框' : 'Markdown'
                }}</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-card>
      </el-table>
      <!-- 分页 -->
      <div class="main-footer">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import mixins from '@/mixins/index.js'
import {
  findArticles,
  delArticle,
  changeShowStatus
} from '@/api/contents/article'
export default {
  mixins: [mixins],
  data() {
    return {
      tableData: [],
      searchForm: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 获得文章列表
    init() {
      var params = {}
      // 如果查询输入不为空  克隆
      for (var key in this.searchForm) {
        if (this.searchForm[key] || this.searchForm[key] + '' === '0') {
          params[key] = this.searchForm[key]
        }
      }
      findArticles(this.page.currentPage, this.page.pageSize, params).then(
        (res) => {
          this.tableData = res.data.rows
          this.page.total = res.data.total
        }
      )
    },
    // 搜索
    onSearch() {
      this.page.currentPage = 1
      this.init()
    },
    // 重置
    onReset() {
      // 清空输入表单 this.$options.data()初始化的vue数据
      this.searchForm = this.$options.data().searchForm
      this.init()
    },
    // 切换显示状态
    swtichCode(val) {
      var flag = val.isShow === 0 ? 1 : 0
      changeShowStatus({
        id: val.id,
        isShow: val.isShow
      }).then((res) => {
        if (res.success) {
          this.$message.success('状态更改成功')
        } else {
          val.isShow = flag
          this.$message.error('状态更改失败')
        }
      })
    },
    // 跳转到修改页面
    handleEdit(val) {
      this.$router.push({ name: 'EditArticle', params: { id: val } })
    },
    // 删除文章
    handleDelete(id) {
      this.delData(id, delArticle)
    },
    // 跳转到添加页面
    addArticle() {
      this.$router.push({ name: 'AddArticle', params: { id: '' } })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
